<template>
	<view class="detail" v-if="goodsIfon">
		<u-navbar @leftClick="back"
		 bgColor="#F6F9FF"
		 leftIconColor="#000000"
		  :title="goodsIfon.blind_box_title"></u-navbar>
		  <!-- <image src="@/static/images/timg2.png" mode="aspectFit" class="dg"></image>
		  <image src="@/static/images/xbg.png" mode="aspectFit" class="dgs"></image> -->
		<view class="goods">
			<!-- #ifdef MP-WEIXIN -->
			<!-- <Model :thumb="detail.thumb"></Model> -->
			<!-- #endif -->		
			<!-- #ifdef H5||APP -->
			<!-- <H5Model
			:type="detail.special_type_id==2?2:1" 
			:model="detail.special_type_id==2?detail.resources_address:$api.glb" 
			:thumb="detail.thumb"></H5Model> -->	
			<!-- #endif -->
			<image :src="goodsIfon.blind_box_img" mode=""></image>
		</view>
		<view class="content">
			<view class="content-header">
				<view class="content-header-cont">
					<view class="content-header-cont-header">
						<view class="title">
							<view class="">
								<text>{{goodsIfon.blind_box_title}}</text>
							</view>
							<view class="bq">
								<view class="avatar">
									<image :src="goodsIfon.portrait" mode=""></image>
								</view>
								<view class="author" style="margin-left: 8rpx;">{{ goodsIfon.company||'' }}</view>
							</view>
						</view>
						<view class="info">
							<view class="">
								<view class="count">
									<text class="text">发行</text>
									<text class="text-c">{{ goodsIfon.total }}份</text>
								</view>
								<view class="count">
									<text class="text">已售</text>
									<text class="text-c">{{ goodsIfon.sold }}份</text>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="chainInfo" v-if="false">
				<view class="title">
					链上信息
				</view>
				<view class="line">
					<view class="left">		
					<view class="bq">合约地址</view> <text>{{detail.contract_address|yingcang}}</text>
					</view>
				<view class="right">
					<view class="bq" @click="toUrls(detail.bsn_url)">查看合约</view> <image class="ico" src="../../static/images/share/lr.png" mode="aspectFit"></image>
				</view>
				</view>
				<view class="line">
					<view class="left">		
					<view class="bq">链上标识</view> <text>{{detail.chain_mark}}</text>
					</view>
					
				</view>
				<view class="line">					
					<view class="left">						
						<view class="bq">发布时间</view> <text>{{detail.create_time}}</text>
					</view>
				</view>
			
			</view>
			<view class="work" v-if="false">
			<view class="tops" v-if="false">
				<view class="work-title">创作者介绍</view>				
				<view class="btn" @click="toPage('/pages/Index/myindex?id='+detail.mer_id)">
					TA的主页
					<image class="ico" src="@/static/ico/lrs.png" mode="aspectFit"></image>
				</view>	 
			</view>
			<view class="author" v-if="false">
				<u-avatar size="42" :src="detail.portrait"></u-avatar>
				<view class="user">
					<view class="des">创作者</view>
					<view class="name">{{detail.user_name||''}}</view>
				</view>				
			</view>
			<view class="work_goods_info" v-if="false">
				<view class="work_title">
					<u-parse :content="detail.company_int"></u-parse>
				</view>
			</view>
			</view>
			<!-- 交易记录 -->
			<Trading v-if="false" :id="id" />
			
			<view class="describe" v-if="false">
				<view class="describe-title">作品描述</view>
				<view class="describe-content">
					<u-parse :content="detail.story "></u-parse>
				</view>
			</view>
			<view class="notice" v-if="false">
				<view class="notice_title">购买须知</view>
				<view class="des" v-html="purchase.value"></view>
			</view>
			<!-- <view class="support">疯传数藏 提供技术支持</view> -->
			
			<view class="btoomm" v-if="false">
				<view class="jszc">
					<image src="@/static/images/dylogo.png" mode="aspectFit"></image>
				提供技术支持
				</view>
				<view class="bah">
					<!-- 鄂ICP备2022006927号 -->
				</view>			
			</view>
		</view>
	<!-- 	<view class="bottombtn" >
		<u-button :loading="loading" class="btns" shape="circle" v-if="detail.sell_status==1" @click="nosend">取消转售</u-button>
		<u-button :loading="loading" class="btns" shape="circle" v-else @click="send">转售</u-button>
		</view> -->
		<view class="tabs">
			<u-tabs lineWidth="40" lineHeight="2"  activeStyle="color: #292A40;font-size: 28rpx;font-weight: 800;" inactiveStyle="color: #8C93AA;font-size: 28rpx" :list="tabList" @change="changeTab"></u-tabs>
		</view>
		<view class="tabBox" >
			<view class="container" v-if="current === 0">
				<view class="container-shangplist">
					   <view class="container-shangplist-tips">
						   <image src="@/static/images/info/xiaofk.png" mode=""></image>
					   	  <text>该盲盒可开出下列作品中的其中 <text style="color: #000;">1</text>个，祝您好运~</text>
					   </view>
					   <view class="container-shangplist-item" v-for="(l,i) in goodsList">
					   	     <view class="item">
					   	     	 <view class="item-name">
					   	     	 	<text>{{l.title}}</text>
					   	     	 </view>
								 <view class="item-baif">
								 	<text>概率：{{l.probability}}</text> 
									<text style="margin-left: 38rpx;">原价：¥ {{l.base_price}}</text>
								 </view>
					   	     </view>
					   </view>
				</view>
			</view>
			<view class="container" v-if="current === 1">
                 <view class="container-detailImg">
                 	<!-- blind_box_img -->
					<image :src="goodsIfon.blind_box_img" mode="widthFix"></image>
                 </view>
			</view>
			<view class="container" v-if="current === 2">
				<!-- <Trading :id="id" :recording="false"  texts="抽取记录"/> -->
				<view class="recorList">
					<view class="recorList-item" v-for="(l,i) in recorList">
						<view class="recorList-item-left">
							<view class="recorList-item-left-portrait">
								<image :src="l.portrait" mode=""></image>
							</view>
							<view class="recorList-item-left-ifon">
								<view>{{l.nickname}}</view>
								<view>{{l.create_time}}</view>
							</view>
						</view>
						<view class="recorList-item-right">
							<text>{{l.title}}</text>
						</view>
					</view>
				</view>
			</view>
			<view class="container" v-if="current === 3">
				<view class="introduce">
					<view class="describe">
						<view class="describe-title">作品解读</view>
						<view class="describe-content">
							<u-parse :content="goodsIfon.story "></u-parse>
						</view>
					</view>
					<!-- <view class="authorInfo">
						<view class="authorInfo-title">创作者介绍</view>
						<view class="authorInfo-content">
							<view class="Info">
								<u-avatar size="32" :src="detail.portrait"></u-avatar>
								<view class="info">
									<view class="name">{{ detail.user_name||'' }}</view>
									<view class="address">{{detail.address}}</view>
								</view>
							</view>
							<view class="toHome" @click="toPage('/pages/Index/myindex?id='+detail.mer_id)">
								<text>他的主页</text>
								<u-icon name="play-right-fill" color="#8C93AA" size="10"></u-icon>
							</view>
						</view>
						<view class="parse">
							<u-parse :content="detail.company_int"></u-parse>
						</view>
					</view> -->
				</view>
			</view>
		</view>

		<view class="ntabar savepadding savebottom">
			<view class="ntabar-price">
               <text >{{(sell_out==0 || btnType==1 || btnType==2)?'售价:':'已售罄'}}</text>
			   <text>￥{{goodsPrce.price}}</text>
			</view>
			<view class="ntabar-btn" @click="gooldStatus">
				<text v-if="btnType==1  ||(sell_out==0 && btnType==2) || (order_id && btnType==2)">{{((goodsPrce.is_mine==1)|| (order_id && !btnType==2))?'取消寄售':'立即购买'}}</text>
				<text v-else>去市场看看</text>
				
				<image src="@/static/images/info/gomaizuojiantou.png" mode=""></image>
			</view>
		</view>
		<u-popup :show="mergeShow" @close="mergeShow = false" bgColor="#F1F5FB">
			<view class="mergeBox">
				<view class="mergeTitle">确认合成活动</view>
			</view>
			<view class="mergeContent" v-if="mergeList.length > 0">
				<view class="item" v-for="item in mergeList" :key="item.id" @click="toPage('/pages/fusion/detail',{id:item.id});mergeShow = false">
					<view class="left">
						<view class="img">
							<image :src="item.thumb" mode=""></image>
						</view>
						<view class="info">
							<view class="title">{{ item.title }}</view>
							<view class="date">
								时间：{{item.start_time|dateFormat}} – {{item.end_time|dateFormat}}
							</view>
						</view>
					</view>
					<view class="right">
						<u-icon name="arrow-right" size="16"></u-icon>
					</view>
				</view>
			</view>
			<view v-else class="mergeContent">
				<Empty :type='3' text="暂无数据" />
			</view>
		</u-popup>
		<u-overlay :show="isAvatar" @click="isAvatar = false">
			
			<view class="h5-down">
				<img :src="detail.thumb" alt="">
				<view class="btn" @click="toSave(detail.thumb)">保存图片</view>
			</view>
			<!-- #ifdef MP-WEIXIN -->
			<view class="down" @tap.stop="isAvatar=false,download(detail.thumb)">
				<image src="@/static/ico/down.png" mode=""></image>
				<text>生成头像素材</text>
			</view>
			<!-- #endif -->
		</u-overlay>
		<!-- <u-gap height="50" bgColor="#030303"></u-gap> -->
		<u-popup round="20" mode="bottom" :show="show" @close="show=false">
		    <view class="show_off">
		        <view class="title">炫耀藏品</view>
				<view class="btns">
					<view class="item">
						<u-button openType="share"></u-button>
						<image src="@/static/ico/wx.png" mode="aspectFill"></image>
						<view>微信</view>
					</view>
					<view class="item" @tap="SpecialGoodsShare(detail.id)">
						<image src="@/static/ico/save.png" mode="aspectFill"></image>
						<view>保存图片</view>
					</view>
				</view>
				<view class="close" @tap="show=false">取消</view>
		    </view>
		</u-popup>
		<!-- #ifdef H5 -->
		<html2canvas :goods="detail" :show="share" @close="close"></html2canvas>
		<!-- #endif -->
		
		<u-popup round="20" mode="bottom" :show="showtips" @close="showtips=false">
		    <view class="show_off">
				<view class="simg">
					<image src="@/static/images/share/tips.png" alt="" class="icon" mode="aspectFit"></image> 
				</view>				
		        <view class="title">温馨提示</view>
			<view class="tips">
				本数字藏品尚未满足可以转赠的条件
			</view>
			<view class="cont">
				您的数字艺术品在购买购T+5天后可以转赠給年满14周岁的实名用户;目前不支持任何形式的有偿转赠，请警惕欺诈风险。一旦发现异常行为，我们会对相关帐户采取限制措施
			</view>
				<view class="close" @tap="showtips=false">知道了</view>
		    </view>
		</u-popup>
		<u-popup round="10" mode="center" :show="sendShow" closeable
		 @close="sendShow=false">
			<view class="show_box">
				<view class="title">转售商品</view>
			<view class="item">
			<view class="laber">设置售价</view>
			<input type="digit"  placeholder="请输入您的售价" @blur="flex"  v-model="price" @input="js()" class="input" />
			</view>
			<view class="item">
			<view class="laber">交易密码</view>
			<input type="password"  placeholder="请输入您的交易密码"   v-model="password" class="input"/>
			</view>
			<view class="box">
			<view class="items">
			<view class="laber">平台手续费</view>
			<view class="input">
				{{fee}}%
			</view>
			<!-- <input type="text"  placeholder="平台手续费" disable  :value="fee+'%'" class="input" /> -->
			</view>
			<view class="items">
			<view class="laber">三方平台结算服务费</view>
			<view class="input">
				{{fee3}}%
			</view>
			<!-- <input type="text"  placeholder="创作者版权费" disable   :value="fee2+'%'" class="input" /> -->
			</view>
			<view class="items">
			<view class="laber">版权费</view>
			<view class="input">
				{{fee2}}%
			</view>
			<!-- <input type="text"  placeholder="创作者版权费" disable   :value="fee2+'%'" class="input" /> -->
			</view>
			<view class="items bor">
			<view class="laber">实际到账金额</view>
			<!-- <input type="text"  placeholder="实际到账金额"  disable  class="input" /> -->
			
			<view class="input">
				{{price?(price*(100-fee-fee2-fee3)/100).toFixed(2):'0'}}
			</view>
			</view>
			</view>
		
			<view class="bottom">
			<u-button :loading="loading"  class="gs"  @click="tosend">转售</u-button>
			</view>
			</view>
		</u-popup>
		<u-modal :show="nshow" @cancel="nshow=false "
		 asyncClose  content="是否取消转售？" 
		 buttonReverse  @confirm="GoSend" 
		 cancelColor="#A2A2A2" 
		 confirmColor="#00000" 
		 title="提示" 
		 confirm-text="取消转售" 
		  cancelText="暂不取消" show-cancel-button></u-modal>
		<u-modal :show="tshow" @confirm="GoPle" asyncClose content="您还未设置交易密码？" @cancel="tshow=false" title="提示" cancelColor="#A2A2A2" confirmColor="#00000" confirm-text="去设置" show-cancel-button></u-modal>
		<canvas canvas-id="myCanvas"
			style="width:1000px;height:1000px;position: fixed;left: 0;top: -999999px;"></canvas>  
		  
	</view>
</template>

<script>
	import {mixin} from '@/Mixins/mixin.js'
	import Model from '@/subpage/components/3D.vue'
	import H5Model from '@/subpage/components/H53D.vue'
	import html2canvas from '@/components/html2canvas.vue'
	// import H5Models from '@/subpage/components/3Ds.vue'
	import Trading from '@/components/trading.vue'
	import Empty from '@/components/Empty.vue'
	import moment from 'moment'
	export default {
		mixins:[mixin],
		components:{
			Model,
			H5Model,
			// H5Models,
			html2canvas,
			Trading,
			Empty
		},
		data() {
			return {
				detail:{},
				purchase:{},
				show:false,//是否显示炫耀弹窗
				isAvatar:false,
				share:false,
				showtips:false,
				loading:false,
				sendShow:false,
				price:'',
				tshow:false,
				nshow:false,
				password:'',
				fee:0,
				fee2:0,
				fee3:0,
				min:50,
				purchaselist:'',
				max:100000,
				id:'',
				scrollTop:0,
				current: 0,
				pages: 1,
				tabList: [
					{name:'作品描述'},
					{name:'细节展示'},
					{name:'抽取记录'},
					{name:'作品介绍'}
				],
				specialId: '',
				goodsId: '',
				purchaselist: [],
				mergeShow: false,
				mergeList: [],
				sell_status: '', // 转售状态
				goodsIfon:null , //商品信息
				goodsList:[],//盲盒可能开出的商品列表
				recordpage:1, // 盲盒页数
				recorList:[],
				recorTotal:0,
				order_id:null,
				sell_out:1 ,
				btnType:null,
			}
		},
		onReady() {
			
		},
		onReachBottom() {
			if (this.current === 0) {
				if (this.purchaselist.length < this.totals) {
					this.pages += 1
					this.getmylist()
				}
			}
		},
		onPageScroll(e) {
				this.scrollTop = e.scrollTop;
			},
		onLoad(e) {		
			this.id = this.goodsId = e.id
			this.order_id = e.order_id
			this.specialId = e.specialId
			this.btnType = e.type
			console.log(this.btnType)
			this.goodsInfo(e.id)
			if (this.current === 0) {
				this.getmylist()
			}
		},
		onShow() {
			this.getUser()
			this.getPurchase();
		},
		filters:{			
			yingcang(val) {
			  if (val) {
			    let a = val.replace(/(\w{8})\w+(\w{8})/, "$1...$2");
			    return a;
			  } else {
			    return "...";
			  }
			},
			dateFormat (val) {
				return moment(val).format('MM月DD hh:mm')
			}
		},
		onReachBottom(){
			
			if(this.current === 2 && this.recorTotal>this.recorList.length){
				this.recordpage+=1
				this.recordingList()
			}
		},
		methods: {
			async showMergeModal () {
				this.mergeShow = true
				//合成列表
				let res = await this.$http({
					url:this.$api.getcomlist,
					method: 'GET',
					hideLoading: true,
					data:{
						page:this.page,
						pageSize:this.pageSize,
					}
					
				})
				this.loading = false
				console.log('[合成列表]',res)
				if(res.code==200){
					if(this.page==1){
						this.mergeList=res.data.data;
					}else{
						if(res.data.total>this.mergeList.length){
							this.mergeList = this.mergeList.concat(res.data.data)
							this.page += 1
						}
					}
					
				}
			},
			// 我拥有的列表
			async getmylist() {
				let data = await this.$http({
					url: this.$api.myShowList,
					method: 'get',
					hideLoading: true,
					data: {
						page: this.pages,
						page_size: 10,
						special_id: this.specialId,
						type: 2,
						sell_status: '1'
					}
				})
				let list = data.data.data
				if (data.code == 200) {
					if (this.pages == 1) {
						this.purchaselist = []
					}
					this.purchaselist = this.purchaselist.concat(list);
					this.totals = data.data.total
					// this.Allshow = true;
				}
			},
			changeTab (e) {
				this.current = e.index
				if(this.current===2){
					this.recordingList()
					
				}
			},
		   async recordingList(){
				let data = await this.$http({
					url: this.$api.blindBoxOpenLog,
					method: 'get',
					hideLoading: true,
					data: {
						page: this.recordpage,
						page_size: 10,
						special_id:this.goodsId
					}
				})
				if(data.code===200){
					if(this.recordpage===1){
						this.recorList = []
					}
					this.recorTotal = data.data.total
					data.data.data.forEach(item=>{
						this.recorList.push(item)
					})
				}else{
					this.$u.toast(res.msg)
				}
			},
			toUrls(url){
				if(url){
				//#ifdef H5
				window.open(url)
				//#endif
				// #ifdef APP
				plus.runtime.openURL(url)
				// #endif
				}else{
					this.$u.toast('暂无合约信息')
				}
			},
			async goodsLog(){
				let data = await this.$http({
					url:this.$api.goodsLog,
					method: 'POST',
					hideLoading: true,
					needToken:true,
					data:{
						id:this.id,
						page:1,
						page_size:5
					}
				})
				console.log('[流转信息]',JSON.stringify(data))
				if(data.code==200){
					this.purchaselist = data.data.data;
				}
			},
			async getUser(){
				let data = await this.$http({
					url:this.$api.getUser,
					method: 'POST',
					hideLoading: true,
					needToken:true,
					data:{}
				})
				if(data.code==200){
					this.userInfo=data.data
					// this.myGoodsList()
				}
			},
		
			async send(){
			// if (this.detail.is_integral > 0) return
				if(this.userInfo.buy_passwd){
					let data= await this.$http({
							url: this.$api.getConfigDetail,
							method: 'get',
							hideLoading: true,
							needToken: true,
							data: {name: 'platform_fee,trilateral_platform_fee'}
						})
						if (data.code == 200) {
							this.fee=data.data[0].value
							this.fee3=data.data[1].value
							this.sendShow=true
							this.fee2=this.detail.chuang_rate
							this.price=''
							this.password=''
						}
					}else{
						this.tshow=true
					}
			},
			async getPurchase(){
				let data = await this.getConfigDetail('purchase_instructions')
				if(data.code == 200){
					this.purchase = data.data
				}
				console.log('[purchase]',this.purchase)
			},
			async tosend(){
			
				if(this.userInfo.buy_passwd){
					if(!this.password){
						uni.$u.toast("请输入交易密码")
						return
					}
					if (!this.goodsId) return uni.$u.toast("请选择你要操作的藏品")
					if(this.price){
						let data= await this.$http({
							url: this.$api.sellMyGoods,
							method: 'post',
							hideLoading: true,
							needToken: true,
							data: {id: this.goodsId,price:this.price,password:this.password}
						})
						if(data.code==200){
							this.sendShow=false
							uni.$u.toast("转售成功")
							this.goodsInfo(this.detail.id)
							this.getmylist()
						}else{
							uni.$u.toast(data.msg)
						}
					}else{
						uni.$u.toast("请输入转售价格")
					}
				}else{
					this.tshow=true
				}
			},
			async gooldStatus(){
				if(this.sell_out===1 && this.btnType==2 && !this.order_id){
					     uni.switchTab({
					     	url:'/pages/shop/index'
					     })
					return
				}
				// console.log(this.sell_out,this.btnType)
				if(((!this.order_id &&this.sell_out!=1 ) || (this.order_id)) && this.btnType==2 && this.goodsPrce.is_mine!=1){
					if(this.order_id){
						uni.navigateTo({
							url:'/pages/shop/payment?id='+this.id+'&order_id='+this.order_id+'&type=2'
						})
					}else{
						uni.navigateTo({
							url:'/pages/Order/pay?id='+this.id
						})
					}
					return
				}
				
				if(this.order_id){
					let data= await this.$http({
						url: this.$api.blindBoxChangeCancel,
						method: 'post',
						hideLoading: true,
						needToken: true,
						data: {
							order_id:this.order_id
						}
					})
					// console.log(data)
					if(data.code===200){
						this.$u.toast(data.msg)
						setTimeout(()=>{
							uni.navigateTo({
								url:`/pages/airdrop/indexs?id=${this.goodsIfon.blind_box_id}&order_id=${this.order_id}` 
							})
						},1000)
					}else{
						this.$u.toast(data.msg) 
					}
					
				}else{
					console.log(111)
				}
			},
			GoPle(){
				this.tshow=false
				uni.navigateTo({
					url:'/pages/save/editpwd'
				})
			},
			nosend(){
				this.nshow=true
			},
			js(){
				setTimeout(()=> {
				if(this.price-this.max>0){
					this.price=this.max
				}
				}, 100);
			},
			flex(){
				 this.price=(this.price*1).toFixed(2)
			},
			async GoSend(){
				let data= await this.$http({
					url: this.$api.cancelSellMyGoods,
					method: 'post',
					hideLoading: true,
					needToken: true,
					data: {id: this.goodsId}
				})
				if(data.code==200){
					this.nshow=false
					uni.$u.toast("取消转售成功")
					this.goodsInfo(this.detail.id)
					this.getmylist()
				}else{
					uni.$u.toast(data.msg)
				}
			},
			toTr(e){
				if (this.detail.is_integral > 0) return
				if(this.userInfo.buy_passwd){
					if(e){
						this.toPage(`/subpage/Transfer/index?id=${e}`)
					}else{
						this.showtips=true
					}
				}else{
					this.tshow=true
				}
			},
			close(e){
				this.share = e
			},
			toSave(url){
				uni.saveImageToPhotosAlbum({
					filePath: url,
					success: () => {
						this.$u.toast('保存成功，快去分享到朋友圈吧~');
					},
					fail: () => {
						this.$u.toast('保存失败~');
					}
				});
			},
			confirmAvatar(){
				this.download(this.detail.thumb)
			},
			async goodsInfo(id){
				let data = await this.$http({
					url:this.$api.blindBoxDetail,
					method: 'GET',
					hideLoading: true,
					needToken:true,
					data:{
						special_id:id,
						order_id:this.order_id
					}
				})

				if(data.code==200){
                    this.goodsIfon =  data.data.special			
                    this.goodsList =  data.data.items
					this.goodsIfon.total = data.data.total
					this.goodsIfon.sold = data.data.sold
					this.sell_out = data.data.sell_out
					if(this.order_id){
						this.goodsPrce = data.data.order
					}else{
						this.goodsPrce = data.data.special
					}
					
				}
			},
			//分享
			async SpecialGoodsShare(id){
				this.show = false
				let data = await this.$http({
					url:this.$api.SpecialGoodsShare,
					method: 'POST',
					hideLoading: false,
					needToken:true,
					data:{
						special_id :id
					}
				})
				console.log('[分享]',data)
				if(data.code==200){
					this.downloadFile(data.data.url)
				}else{
					uni.showToast({
						title: '图片生成失败',
						duration: 2000,
						icon:'none'
					});
				}
			},
			download(url){
				this.downloadFile(url)
			}
		},
		onShareAppMessage(res) {
		    return {
		      title: this.detail.title,
		      imageUrl:this.detail.thumb,
		      path:`/subpage/Product/details?id=${this.detail.special_id}`
		    }
		},
	}
</script>

<style lang="scss" scoped>
	.detail{
		min-height: 100vh;
		// padding-top: 200rpx;
		box-sizing: border-box;
		// background-color: #F5F5F5;
		position: relative;
		.dg {
			position: absolute;
			top: -40rpx;
			width: 750rpx;
			height: 444rpx;
			z-index: 0;
		}
			
		.dgs {
			position: absolute;
			top: 242rpx;
			width: 750rpx;
			height: 912rpx;
			z-index: 0;
		}
		.goods{
			width: 750rpx;
			height: 750rpx;
			/* #ifdef H5 */
			padding-top: 100rpx;
			/* #endif */
			/* #ifdef APP-PLUS || APP */
			padding-top: 200rpx;
			/* #endif */
			text-align: center;
			background: #F6F9FF;
			image{
				width: 100%;
				height: 100%;
			}
		}
		.tabs {
			width: calc(100vw - 60rpx);
			margin: auto;
			display: flex;
			justify-content: space-evenly;
			background: #fff;
			border-bottom: 1rpx solid #E0E6F0;
			margin-top: 20rpx;
			.u-tabs{
				width: calc(100vw - 60rpx);
				::v-deep .u-tabs__wrapper__nav__item{
					width: 25% !important;
					padding: 0 !important;
					// justify-content: flex-start;
				}
			}
		}
		.tabBox {
			background: #fff;
			padding-bottom: 120rpx;
			.container {
				margin: 0 30rpx;
				padding: 30rpx 0;
				&-detailImg{
					width: calc(100vw - 60rpx);
					image{
						width: 100%;
					}
				}
				&-shangplist{
					&-tips{
						display: flex;
						align-items: center;
						width:calc(100vw - 50rpx);
						height: 60rpx;
						margin: auto;
						background: #F7F8FA;
						border-radius: 3px;
						font-size: 24rpx;
						font-family: PingFangSC-Regular, PingFang SC;
						font-weight: 400;
						color: #8C93AA;
					    image{
							margin:0 7rpx 0  15rpx;
							width: 24rpx;
							height: 24rpx;
						}
					}
				    &-item{
						.item{
							margin-top: 17rpx;
							width: calc(100vw - 60rpx);
							height: 120rpx;
							background: #FFFFFF;
							border-radius: 4px;
							border: 1px solid #E0E6F0;
						    &-name{
								font-size: 28rpx;
								font-family: PingFangSC-Medium, PingFang SC;
								font-weight: 700;
								color: #16172F;
								margin: 20rpx 0 0 20rpx;
							}
							&-baif{
								font-size: 24rpx;
								font-family: PingFangSC-Regular, PingFang SC;
								font-weight: 400;
								color: #8C93AA;
							     margin: 11rpx 0 0 20rpx;
							}
						}
					}
				}
				.recorList{
					margin-top: -30rpx;
					&-item{
						display: flex;
						align-items: center;
						justify-content: space-between;
						width: calc(100vw - 60rpx);
						border-bottom: 1px solid #E0E6F0;
						padding-bottom: 30rpx;
						margin-top: 30rpx;
						&-left{
							display: flex;
							align-items: center;
						  &-portrait{
							  width: 64rpx;
							  height: 64rpx;
							  // background: #D8D8D8;
							  border-radius: 50%;
							  // border: 1px solid #979797;
							  overflow: hidden;
							  image{
								  width: 100%;
								  height: 100%;
							  }
						  }
						  &-ifon{
							
							 margin-left: 16rpx;
							  view:nth-child(1){
								  font-size: 24rpx;
								  font-family: PingFangSC-Medium, PingFang SC;
								  font-weight: 500;
								  color: #16172F;
							  }
							  view:nth-child(2){  
							  	font-size: 24rpx;
							  	font-family: PingFangSC-Regular, PingFang SC;
							  	font-weight: 400;
							  	color: #8C93AA;			  
							  }
						  }
						}
						&-right{
							font-size: 24rpx;
							font-family: PingFangSC-Regular, PingFang SC;
							font-weight: 400;
							color: #16172F;
						}
					}
				}
				.have {
					.item {
						// width: 690rpx;
						// height: 120rpx;
						background: #FFFFFF;
						border-radius: 4rpx;
						border: 1rpx solid #E0E6F0;
						padding: 20rpx;
						box-sizing: border-box;
						.top {
							display: flex;
							justify-content: space-between;
							.item-info {
								.info-number {
									font-size: 28rpx;
									font-weight: 600;
									color: #16172F;
								}
								.status {
									width: 96rpx;
									height: 34rpx;
									font-size: 24rpx;
									background: #E3EAF5;
									color: #8C93AA;
									border-radius: 1rpx 20rpx 1rpx 20rpx;
									padding: 0 12rpx;
									margin-left: 10rpx;
								}
							}
							.item-price {
								font-size: 36rpx;
								font-weight: bold;
								color: #16172F;
							}
							
						}
						.footer {
							display: flex;
							justify-content: space-between;
							.iden {
								width: 211rpx;
								font-size: 24rpx;
								color: #8C93AA;
								overflow: hidden;
								text-overflow: ellipsis;
								white-space: nowrap;
							}
							.tips {
								font-size: 24rpx;
								color: #8C93AA;
							}
						}
						&:not(:first-child) {
							margin-top: 20rpx;
						}
					}
					.active {
						background: #16172F;
						.info-number {
							color: #fff !important;
						}
						.status {
							background: rgba(255,255,255,0.4) !important;
							color: #fff !important;
						}
						.item-price {
							color: #fff !important;
						}
					}
				}
				.chainInfo{
					background: #ffffff;
					border-radius: 8rpx;
					padding: 38rpx 0;
					border-bottom: 1rpx solid #E0E6F0;
					.title{
						font-size: 28rpx;
						font-weight: 600;
						color: #333333;
						line-height: 40rpx;
						margin-bottom: 32rpx;
					}
					.line{
						display: flex;
						align-items: center;
						justify-content: space-between;
						margin: 20rpx 0;
						.bq{
							font-size: 24rpx;
							color: #8C93AA;
							margin-right: 30rpx;
							text-align-last: justify;
							width: 100rpx;
							white-space: nowrap;
						}
						.left{
							font-size: 24rpx;
							font-weight: 600;
							color: #333333;
							line-height: 34rpx;
							display: flex;
						}
					}
					.ico{width: 24rpx;height: 24rpx; margin-left: 10rpx;}
					
					.right{
						font-size: 24rpx;
						font-weight: 600;
						color: #C1C1C1;
						display: flex;
						align-items: center;
					}
				}
				.author{
					display: flex;
					justify-content: space-between;
					align-items: center;
					padding-bottom:18rpx;
					margin-top: 18rpx;
					.user{
						display: flex;
						margin-left: 16rpx;
						.one {
							margin-left: 10rpx;
						}
						.name{
							font-size: 28rpx;
							font-weight: 600;
							color: #000;
							line-height: 40rpx;
							.des {
								position: relative;
								display: inline-block;
								font-size: 24rpx;
								color: #FF8146;
								font-weight: 400;
								margin-left: 20rpx;
								&::after {
									content: '';
									position: absolute;
									width: 8rpx;
									height: 8rpx;
									border-top: 1rpx solid #FF8146;
									border-right: 1rpx solid #FF8146;
								}
								&::before {
									content: '';
									position: absolute;
									left: -8rpx;
									bottom: 6rpx;
									width: 8rpx;
									height: 10rpx;
									border-bottom: 1rpx solid #FF8146;
									border-left: 1rpx solid #FF8146;
								}
							}
						}
						.address {
							color: #8C93AA;
							font-size: 24rpx;
							width: 300rpx;
							color: #8C93AA;
							font-size: 24rpx;
							text-overflow: ellipsis;
							overflow: hidden;
							white-space: nowrap;
						}
					}
					.hisHome {
						display: flex;
						font-size: 24rpx;
						color: #8C93AA;
					}
				}
				.introduce {
					.describe{
						background: #FFF;
						border-radius: 8rpx;
						&-title{
							font-size: 32rpx;
							font-weight: 600;
							color: #16172F;
							line-height: 40rpx;
						}
						&-content{
							margin-top: 20rpx;
							font-size: 24rpx;
							color: #8C93AA;
						}
					}
					.authorInfo {
						margin-top: 40rpx;
						&-title{
							font-size: 32rpx;
							font-weight: 600;
							color: #16172F;
							line-height: 40rpx;
						}
						&-content {
							display: flex;
							align-items: center;
							justify-content: space-between;
							.Info {
								display: flex;
								align-items: center;
								margin-top: 28rpx;
								.info {
									margin-left: 20rpx;
									.name {
										font-size: 28rpx;
										color: #16172F;
										font-weight: 600;
									}
									.address {
										font-size: 24rpx;
										color: #8C93AA;
									}
								}
							}
							.toHome {
								display: flex;
								font-size: 24rpx;
								color: #8c93aa;
							}
						}
						.parse {
							font-size: 24rpx;
							color: #8C93AA;
							margin-top: 24rpx;
						}
					}
				}
			}
		}
		.content{
			background: #F6F9FF;
			&-header{
				// padding: 132rpx 76rpx 22rpx 78rpx;
				box-sizing: border-box;
				// min-height: 302rpx;
				// background: #FFFFFF url(@/static/images/tray.png)center center no-repeat;
				background-size: 100% 100%;
				&-cont{
					display: flex;
					justify-content: center;
					align-items: center;
					&-header{
						display: flex;
						justify-content: space-between;
						width: 100%;
						background: #FFFFFF;
						border-radius: 8rpx;

						padding: 30rpx;
						box-sizing: border-box;
						z-index: 888;
						.title {
							// display: flex;
							justify-content: space-between;
							align-items: center;
							font-size: 36rpx;
							font-weight: 600;
							color: #292A40;
							.tag{
								display: inline-block;
								// margin-left: 12rpx;
								// margin-top: 10rpx;
								text{
									display: inline-block;
									padding: 2rpx 12rpx;
									background: #b6b6b6;
									border-radius: 4rpx;
									font-size: 24rpx;
									font-weight: 600;
									color: #FFF;
									line-height: 34rpx;
									&.number{
										margin-left: 0;
										background: #000;
										border-radius: 4rpx 0px 0px 4rpx;
										color: #FFF;
									}
								}
								
							}
							.bq {
								display: flex;
								font-size: 24rpx;
								color: #8C93AA;
								margin-top: 12rpx;
								.avatar {
									width: 32rpx;
									height: 32rpx;
									image {
										width: 100%;
										height: 100%;
									}
								}
							}
						}
						.info {
							display: flex;
							justify-content: space-between;
							align-items: center;
							
							.count {
								display: flex;
								// justify-content: center;
								// width: 200rpx;
								height: 50rpx;
								background: #fff;
								border-radius: 4rpx;
								border: 1rpx solid #F2F5FA;
								padding: 4rpx;
								box-sizing: border-box;
								&:nth-child(2) {
									margin-top: 12rpx;
								}
								.text {
									display: flex;
									justify-content: center;
									align-items: center;
									font-size: 24rpx;
									background: #F2F5FA;
									border-radius: 2rpx;
									opacity: 0.4;
									color: #8C93AA;
									padding: 8rpx;
									box-sizing: border-box;
								}
								.text-c {
									display: flex;
									justify-content: center;
									align-items: center;
									font-size: 24rpx;
									color: #8C93AA;
									margin-left: 8rpx;
									// font-weight: bold;
								}
							}
						}
						// display: flex;
						// justify-content: space-between;
						// align-items: center;
						// padding: 0 78rpx;
						// box-sizing: border-box;
						// image{
						// 	width: 60rpx;
						// 	height: 104rpx;
						// }
						&-top{
							.title{
								text-align: center;
								text{
									font-size: 32rpx;
									font-weight: 600;
									color: #000;
									line-height: 44rpx;
									
								}
							}
							.tags{
								.tag{
									display: inline-block;
									margin-left: 12rpx;
									margin-top: 10rpx;
									text{
										display: inline-block;
										padding: 2rpx 12rpx;
										background: #b6b6b6;
										border-radius: 4rpx;
										font-size: 24rpx;
										font-weight: 600;
										color: #FFF;
										line-height: 34rpx;
										&.number{
											margin-left: 0;
											background: #000;
											border-radius: 4rpx 0px 0px 4rpx;
											color: #FFF;
										}
									}
									
								}
								
							}
						}
					}
					.tips{
						margin-top: 10rpx;
						font-size: 24rpx;
						font-weight: 400;
						color: #9EA1AF;
						display: flex;
						align-items: center;
						justify-content: center;
						&-y{
							display: inline-block;
							width: 6rpx;
							height: 8rpx;
							border-radius: 3rpx;
							border: 2rpx solid #9EA1AF;
						}
						&-cont{
							margin: 0 8rpx;
							position: relative;
							&::after{
								content: '';
								width: 118rpx;
								height: 2rpx;
								background: linear-gradient(90deg, #E1D3C5 0%, rgba(242, 235, 228, 0) 100%);position: absolute;
								right: -134rpx;
								top: 50%
							}
							&::before{
								content: '';
								width: 118rpx;
								height: 2rpx;
								background: linear-gradient(90deg, rgba(242, 235, 228, 0) 0%, #E1D3C5 100%);
								position: absolute;
								left: -134rpx;
								top: 50%
							}
						}
					}
					
				}
				
			}
			.tags{
				width: 100%;
				margin: 0 auto;
				display: flex;
				    align-items: center;
				    justify-content: center;
				.tag{
					display: inline-block;
					margin-left: 12rpx;
					margin-top: 10rpx;
					text{
						display: inline-block;
						padding: 2rpx 12rpx;
						background: #b6b6b6;
						border-radius: 4rpx;
						font-size: 24rpx;
						font-weight: 600;
						color: #FFF;
						line-height: 34rpx;
						&.number{
							margin-left: 0;
							background: #000;
							border-radius: 4rpx 0px 0px 4rpx;
							color: #FFF;
						}
					}
					
				}
				
			}
			.work{
				background: #FFF;
				padding: 22rpx 28rpx;
				margin: 30rpx;
				border-radius: 8rpx;
				&-title{
					font-size: 28rpx;
					font-weight: 600;
					color: #000;
					line-height: 40rpx;
				}
				.tops{
					display: flex;
					align-items: center;
					justify-content: space-between;
					.btn{
						font-size: 24rpx;
						font-weight: 400;
						color: #C1C1C1;
						padding: 4rpx 14rpx;
						border-radius: 100rpx;
						display: flex;
						align-items: center;
					}
					.ico{width: 24rpx;height: 24rpx; margin-left: 10rpx;}
				}
				.work_goods_info{
					.work_title{
						font-size: 24rpx;
						// font-weight: 600;
						color: #999999;
						::v-deep image{
							max-width: 100%!important;
						}
					}
				}
				
			
			}
		
	
			
			.notice{
				background: #FFF;
				padding: 22rpx 28rpx;
				// margin-top: 18rpx;
				margin: 30rpx;
				border-radius: 8rpx;
				.notice_title{
					font-size: 28rpx;
					font-weight: 600;
					color: #000;
					line-height: 40rpx;
				}
				.des{
					margin-top: 18rpx;
					font-size: 24rpx;
					font-weight: 600;
					color: #999999;
					line-height: 34rpx;
				}
			}
			.support{
				font-size: 24rpx;
				font-weight: 400;
				color: #808080;
				line-height: 36rpx;
				text-align: center;
				padding: 44rpx 0 200rpx 0;
			}
			.btoomm{
				margin: 20rpx auto 30rpx;
				padding-top: 30rpx;
				min-height: 300rpx;
				background: #FFFFFF;
				.jszc{
					display: flex;
					align-items: flex-end;
					justify-content:center;
					color: #C0C0C0;
					font-size: 32rpx;
					image{
						height:80rpx;
						width: 80rpx;
						margin-right: 10rpx;
					}
				}
				.bah{
					color: #C0C0C0;
					font-size: 26rpx;
					text-align: center;
					margin-top: 20rpx
			
				}
			}
		}
		.show_off{
			background: #FFF;
			padding: 22rpx 46rpx 72rpx 46rpx;
			border-radius: 20rpx 20rpx 0 0;
			box-sizing: border-box;
			width: calc(100% );
			.simg{
				width: 100%;
				display: flex;
			}
			.icon{
				height: 80rpx;
				width: 80rpx;
				margin: 38rpx auto;
			}
			.tips{
				font-size: 24rpx;
				font-weight: 400;
				color: #FFFFFF;
				line-height: 34rpx;
				text-align: center;
				margin: 40rpx auto;
			}
			.cont{
				font-size: 24rpx;
				font-weight: 400;
				color: #A0A0A0;
				line-height: 34rpx;
			}
			
			.title{
				font-size: 32rpx;
				font-weight: 400;
				color: #FFFFFF;
				line-height: 46rpx;
				letter-spacing: 2px;
				text-align: center;
			}
			.btns{
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding: 0 150rpx;
				margin-top: 68rpx;
				.item{
					font-size: 24rpx;
					font-weight: 400;
					color: #9A9A9A;
					line-height: 36rpx;
					position: relative;
					text-align: center;
					image{
						width: 92rpx;
						height: 92rpx;
					}
					::v-deep button{
						width: 100%;
						height: 100%;
						position: absolute;
						left: 0;
						top: 0;
						background-color: transparent;
						border: 0;
					}
				}
			}
			.close{
				height: 92rpx;
				background: #666666;
				border-radius: 48rpx;
				font-size: 32rpx;
				font-weight: 400;
				color: #FFFFFF;
				line-height: 92rpx;
				letter-spacing: 2px;
				text-align: center;
				margin-top: 32rpx;
			}
		}
		.down{
			position: fixed;
			right:150rpx;
			bottom: 120rpx;
			z-index: 1000;
			display: flex;
			align-items: center;
			justify-content: flex-end;
			padding: 40rpx;
			background-color: #1B1B1B;
			box-shadow: 0 0 5rpx rgba(255,255,255,0.4);
			&::after{
				content: '';
				width: 0;
				height: 0;
				border: 20rpx solid transparent;
				border-top-color: #1B1B1B;
				position: absolute;
				left: 100rpx;
				bottom: -38rpx;
			}
			image{
				width: 28rpx;
				height: 30rpx;
			}
			text{
				font-size: 24rpx;
				font-weight: 600;
				color: #FFFFFF;
				margin-left: 14rpx;
			}
			
		}
		.h5-down{
			padding: 30rpx;
			box-sizing: border-box;
			position: fixed;
			width: 100%;
			top: 50%;		
			transform: translate(-50%,-50%);
			left: 50%;
			img{
				max-width: 100%;
			}
			.tips{
				font-size: 32rpx;
				font-weight: 400;
				color: #B9B9B9;
				line-height: 48rpx;
				margin-top: 44rpx;
				text-align: center;
			}
			.btn{
					background: #F2E0BC;
							height: 80rpx;
							line-height: 80rpx;
							font-size: 30rpx;
							font-weight: 600;
							color: #4E422C;
							text-align: center;
							margin-top: 50rpx;
							border-radius: 8rpx;
			}
		}
		.bottombtn{
			position: fixed;
			    bottom: 80rpx;
			    width: 100%;
			.btns{
				color: #000000;
				background: #EFBE62;
				border: none;
				height: 79rpx;
				margin: 10rpx auto 50rpx;
				width: 80%;
			}
		}
		.ntabar{
			width: 100vw;
			height: 120rpx;
			background: #FFFFFF;
			box-shadow: 0px -8px 18px 0px rgba(7,8,28,0.04);
			backdrop-filter: blur(0px);
			display: flex;
			align-items: center;
			justify-content: space-between;
			// width: calc(100% - 54rpx);
			// padding: 26rpx 20rpx 26rpx 35rpx;
			position: fixed;
			left: 0;
			bottom: 0;
			z-index: 1000;
			background-color: #fff;
			&-price{
				margin-left: 30rpx;
				text:nth-child(1){
					font-size: 24rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #8C93AA;
				}
				text:nth-child(2){
					font-size: 48rpx;
					font-family: DINAlternate-Bold, DINAlternate;
					font-weight: bold;
					color: #16172F;
				}
				
			}
			&-btn{
				margin-right: 30rpx;
				width: 268rpx;
				height: 68rpx;
				background: #FFFFFF;
				border-radius: 34rpx;
				border: 1px solid #979797;
			    display: flex;
				justify-content: space-between;
				align-items: center;
				text{
					margin-left: 32rpx;
					font-size: 28rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #16172F;
				}
				image{
				   width: 31rpx;
				   height: 20rpx;
				   margin-right: 31rpx;
				}
			}
			.mergeBtn {
				.item {
					display: flex;
					align-items: center;
					justify-content: space-around;
					font-weight: 600;
					width: 268rpx;
					height: 68rpx;
					font-size: 28rpx;
					border-radius: 34rpx;
					border: 1rpx solid #979797;
				}
			}
			.price {
				.title {
					font-size: 24rpx;
					color: #8C93AA;
				}
				.price-number {
					color: #16172F;
					font-weight: bold;
					font-size: 48rpx;
				}
			}
			.btn {
				display: flex;
				// justify-content: space-between;
				.item{
					display: flex;
					align-items: center;
					justify-content: center;
					width: 160rpx;
					height: 68rpx;
					background: #FFFFFF;
					border-radius: 34rpx;
					border: 1rpx solid #979797;
					font-size: 28rpx;
					color: #16172F;
					&:nth-child(2) {
						margin-left: 10rpx;
					}
				}
			}
			
				.ic1{
					width: 34rpx;
					height: 34rpx;
					margin-right: 10rpx;
				}
				.ic2{width: 34rpx;
				height: 34rpx;
				margin-right: 10rpx;
				}
				.ic3{width: 34rpx;
				height: 34rpx;
				margin-right: 10rpx;
					
				}
				.ic4{
			width: 34rpx;
			height: 34rpx;
			margin-right: 10rpx;
				}
		}
		@keyframes myRotate
		{
		    0%{
				transform: rotateY(0deg);
			}
			100%{
				transform: rotateY(-360deg);
			}
		}
		
		.show_box{
			min-width: 626rpx;
			// min-height: 783rpx;
			background: #FFFFFF;
			border-radius: 10rpx;
			padding: 26rpx;
			.title{
				font-size: 36rpx;
				font-family: Microsoft YaHei;
				font-weight: 600;
				color: #000000;
				line-height: 36rpx;
				text-align: center;
			}
			.item{
				margin: 27rpx 0;
			}
			.box{
				padding: 0 16rpx;
				background: #f8f8f8 ;
				border-radius: 10rpx;
			}
			.items{
				// padding-bottom: 20rpx;
				display: flex;
				    align-items: center;
				    justify-content: space-between;
			
						.laber{
							color:#B1B1B1;
						}
				.input{
					width: auto;
					border: none;
					margin: 0;
				}	
				
			}
			.bor{
				border-top:1px solid #ECECEC;
				.laber{
					color: #000000;
				}
			}
			.laber{
				font-size: 28rpx;
				font-family: Microsoft YaHei;
				font-weight: 400;
				color: #000000;
				line-height: 36rpx;
			}
			.input{
				font-size: 28rpx;
				font-family: Microsoft YaHei;
				font-weight: 400;
				color: #232323;
				line-height: 36rpx;
				padding: 20rpx ;
				border: 1px solid #D8D8D8;
				border-radius: 5px;
				margin: 10rpx 0;
			}
			.gs{
				border-radius: 10rpx;
				color: #FFF;
				background: #000;
				margin: 33rpx auto 0;
			}
			
		}
		::v-deep.u-popup__content {
			padding: 30rpx;
		}
	}
	
	
	.mergeBox {
		padding: 30rpx;
		.mergeTitle {
			text-align: center;
			font-size: 36rpx;
			font-weight: 600;
			color: #16172f;
		}
	}
	.mergeContent {
		.item {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 24rpx;
			background: #fff;
			.left {
				display: flex;
				align-items: center;
				.img {
					width: 100rpx;
					height: 100rpx;
					image {
						width: 100%;
						height: 100%;
					}
				}
				.info {
					margin-left: 10rpx;
					.title {
						font-size: 28rpx;
						font-weight: 600;
						color: #16172F;
						margin: 10rpx 0;
					}
					.date {
						font-size: 24rpx;
						color: #8C93AA;
					}
				}
			}
		}
	}
	::v-deep .u-tabs__wrapper__nav__line{
		bottom: 0;
	}
</style>
